<!DOCTYPE html>
<html lang="en">

<body>
  
    <svg viewBox="0 0 100 100" width="200" height="200">
        <circle cx="20" cy="20" r="10" fill="#f00">
            <animate 
                attributeName="cx"
                values="30;90;30"
                keyTimes="0;0.25;1"
                calcMode="linear"
                dur="4s"
				begin="t.click"
                fill="freeze"/>
        </circle>
		
		 <circle cx="20" cy="40" r="10" fill="#0f0">
            <animate 
                attributeName="cx"
                values="30;90;30"
                keyTimes="0;0.25;1"
                calcMode="paced"
                dur="4s"
				begin="t.click"
                fill="freeze"/>
        </circle>
		
		<circle cx="20" cy="60" r="10" fill="#00f">
            <animate 
                attributeName="cx"
                values="30;90;30"
                keyTimes="0;0.25;1"
                calcMode="discrete"
                dur="4s"
				begin="t.click"
                fill="freeze"/>
        </circle>
		
		<text x="50" y="80" font-size="8" text-anchor="middle" id="t" style="cursor:pointer;user-select:none">点我</text>
    </svg>

    


</body>
</html>
